<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .Detali {
            width: 100%;
            height: 100%;
        }
        
        .Detali .Detali1 {
            width: 400px;
            height: 1000px;
            position: relative;
        }
        
        .screen-top {
            height: 80px;
            line-height: 80px;
            font-size: 24px;
            font-weight: 500;
            color: #000;
            margin-top: 7px;
        }
        
        .screen-top span {
            padding-left: 37px;
        }
        
        .screen-top a {
            display: inline-block;
            height: 36px;
            line-height: 34px;
            font-size: 15px;
            letter-spacing: 3px;
            width: 70px;
            text-align: center;
            border: 1px solid #ccc;
            border-radius: 3px;
            color: #666;
            margin-top: 22px;
            margin-left: 324px;
            position: absolute;
            left: 0;
        }
        
        .screen-aaa {
            border-top: 1px solid #ccc;
            padding: 25px 0;
            height: 75px;
            line-height: 25px;
            color: #333;
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        
        .screen-aaa span {
            margin-left: 37px;
            font-size: 18px;
        }
        
        .bottom-arrow:after {
            content: "";
            border: 13px solid #fff;
            border-bottom: none;
            border-right-color: transparent;
            border-left-color: transparent;
            position: relative;
            top: 7px;
            left: 335px;
        }
        
        .screen-aaa .xielei {
            height: 30px;
            padding: 5px 0;
            font-size: 14px;
            line-height: 55px;
            margin-left: 37px;
        }
        
        .chima {
            border-top: 1px solid #ccc;
            padding: 25px 0;
            height: 75px;
            line-height: 25px;
            color: #333;
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        
        .chima .chima1 {
            margin-left: 7px;
        }
        
        .bottom-arrow1:after {
            content: "";
            border: 13px solid #fff;
            border-bottom: none;
            border-right-color: transparent;
            border-left-color: transparent;
            position: relative;
            top: 6px;
            left: 262px;
        }
        
        .chima .chima2 {
            height: auto;
            overflow: hidden;
            margin-bottom: 25px;
            max-height: 240px;
            overflow-y: auto;
        }
        
        .chima .chima2 li {
            height: 30px;
            padding: 5px 0;
            font-size: 14px;
            line-height: 20px;
            margin-left: 21px;
        }
        
        .jije {
            border-top: 1px solid #ccc;
            padding: 25px 0;
            height: 75px;
            line-height: 25px;
            color: #333;
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 1px;
            margin-top: 180px;
        }
        
        .jije span {
            margin-left: 32px;
        }
        
        .bottom-arrow2:after {
            content: "";
            border: 13px solid #fff;
            border-bottom: none;
            border-right-color: transparent;
            border-left-color: transparent;
            position: relative;
            top: 6px;
            left: 262px;
        }
        
        .jije .oooo li {
            height: 30px;
            padding: 9px 29px;
            font-size: 14px;
            line-height: 20px;
        }
        
        .xilian {
            border-top: 1px solid #ccc;
            padding: 25px 0;
            height: 75px;
            line-height: 25px;
            color: #333;
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 1px;
            margin-top: 70px
        }
        
        .xilian span {
            margin-left: 25px;
        }
        
        .bottom-arrow3:after {
            content: "";
            border: 13px solid #fff;
            border-bottom: none;
            border-right-color: transparent;
            border-left-color: transparent;
            position: relative;
            top: 6px;
            left: 250px;
        }
        
        .xilian .paobu {
            margin-left: 12px;
            margin-top: 22px;
        }
        
        .banxin {
            width: 277%;
            height: 1000px;
            /* overflow: hidden; */
            position: absolute;
            top: 0px;
            left: 414px;
        }
        
        .banxin .top-27 {
            height: 75px;
            line-height: 75px;
            font-size: 35px;
            font-weight: 700;
            margin-top: 13px;
        }
        
        .banxin .top-27 span {
            margin-left: 10px;
            font-style: normal;
            font-size: 25px;
            color: #999;
            font-weight: 400;
            vertical-align: baseline;
        }
        
        .result-tags {
            width: 632px;
            height: 41px;
        }
        
        .result-tags a {
            margin-top: 9px;
            display: inline-block;
            margin-right: 6px;
            height: 32px;
            line-height: 30px;
            border: 1px solid #ccc;
            font-size: 13px;
            border-radius: 3px;
            color: #666;
            padding-left: 12px;
            padding-right: 17px;
            position: relative;
        }
        
        .filter-order {
            /* width: 300px;
				height: 300px */
            ;
            position: relative;
            display: inline-block;
            /* 	margin-left: 0;
				margin-top: 0; */
        }
        
        .filter-order .filter-order-paixi {
            width: 100px;
            height: 100px;
            position: absolute;
            top: -96px;
            left: 1000px;
        }
        
        .filter-order .filter-order-paix1 {
            width: 100px;
            height: 100px;
            margin-left: 900px;
            margin-top: -89px;
            display: none;
            line-height: 50px;
        }
        
        .filter-order:hover .filter-order-paix1 {
            display: block;
        }
        
        .good-list {
            height: 400px;
            /* display: flex;
				justify-content */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        
        .good-item {
            height: 68%;
            width: 276px;
            margin-bottom: 5px;
            /* overflow: hidden; */
            position: relative;
        }
        
        .good-name {
            width: 244px;
            height: 30px;
            line-height: 25px;
            font-size: 16px;
            font-weight: 500;
            color: #000;
            position: absolute;
            bottom: 0;
            top: 230px;
            left: 30px;
        }
        
        .good-list .danjia {
            height: 25px;
            line-height: 25px;
            color: #000;
            font-size: 17px;
            font-weight: 500;
            position: absolute;
            top: 257px;
            left: 37px;
        }
    </style>
</head>

<body>
    <header></header>
    <section>
        <div class="Detali">
            <div class="Detali1">
                <div class="screen-top">
                    <span>筛选</span>
                    <a href="#">重置</a>
                </div>
                <div class="screen-aaa">
                    <span>大类</span>
                    <span style="font-family: Arial, Helvetica, sans-serif;"><i class="bottom-arrow1"></i></span>
                    <ul class="xielei">
                        <li><a href="#">鞋类</a></li>
                    </ul>
                </div>
                <div class="chima">
                    <span class="chima1">尺码</span>
                    <span style="font-family: Arial, Helvetica, sans-serif;"><i class="bottom-arrow"></i></span>
                    <ul class="chima2">
                        <li>39</li>
                        <li>40</li>
                        <li>40.5</li>
                        <li>41</li>
                        <li>42</li>
                        <li>42.5</li>
                        <li>43</li>
                        <li>44.5</li>
                    </ul>
                </div>
                <div class="jije">
                    <span>季节</span>
                    <span style="font-family: Arial, Helvetica, sans-serif;"><i class="bottom-arrow2"></i></span>
                    <ul class="oooo">
                        <li><a href="#">春季</a></li>
                        <li><a href="#">夏季</a></li>
                        <li><a href="#">秋季</a></li>
                    </ul>
                </div>

                <div class="xilian">
                    <span>系列</span>
                    <span style="font-family: Arial, Helvetica, sans-serif;"><i class="bottom-arrow3"></i></span>
                    <ul class="paobu">
                        <li><a href="#">跑步系列</a></li>
                    </ul>
                </div>
                <div class="banxin">
                    <div class="top-27">
                        男子所有商品
                        <span>(27)</span>
                    </div>
                    <div class="result-tags">
                        <a href="#" title="跑鞋">跑鞋</a>
                        <button type="button">男</button>
                        <a href="#" title="安踏">安踏</a>
                    </div>
                    <div class="filter-order">
                        <a href="#" class="filter-order-paixi">新品排序</a>
                        <ul class="filter-order-paix1">
                            <li><a href="#">新品排序</a></li>
                            <li><a href="#">销量排序</a></li>
                            <li><a href="#">价格由低到高</a></li>
                            <li><a href="#">价格由高到低</a></li>
                        </ul>
                    </div>
                    <ul class="good-list">


                        <!-- 	<a href="magnifier.html"><img src="./xqy/1.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/2.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/3.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/4.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/5.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/6.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/7.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/8.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/9.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/10.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/11.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/12.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/13.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/14.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/15.jpg"></a> -->

                        <!-- <li class="good-item">
								<a href="magnifier.html"><img src="./xqy/1.jpg"></a>
								<a href="#" class="good-name">安踏男鞋C37度2.0跑鞋2021新款</a><br />
								<span class="danjia">￥300.00</span>
							</li>

							<li class="good-item"> -->
                        <!-- <a href="magnifier.html"><img src="./xqy/2.jpg"></a>
								<a href="#" class="good-name">安踏男鞋跑鞋2021新款</a><br />
								<span class="danjia">￥301.00</span>
							</li> -->

                        <!-- 							<a href="magnifier.html"><img src="./xqy/3.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/4.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/5.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/6.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/7.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/8.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/9.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/10.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/11.jpg"></a>
							
							<a href="magnifier.html"><img src="./xqy/2.jpg"></a>
							<a href="magnifier.html"><img src="./xqy/2.jpg"></a>
							
							
						<!-- 	<li class="good-item">
								<img src="./xqy/3.jpg">
								<a href="#" class="good-name">安踏男鞋跑鞋2021新款</a><br />
								<span class="danjia">￥302.00</span>
							</li>


							<li class="good-item">
								<img src="./xqy/4.jpg">
								<a href="#" class="good-name">安踏男鞋跑鞋2021新款</a><br />
								<span class="danjia">￥303.00</span>
							</li>


							<li class="good-item">
								<img src="./xqy/5.jpg">
								<a href="#" class="good-name">安踏男鞋易弯折跑鞋2021新款</a><br />
								<span class="danjia">￥304.00</span>
							</li>


							<li class="good-item">
								<img src="./xqy/6.jpg">
								<a href="#" class="good-name">安踏星标男款跑鞋2021年新款</a><br />
								<span class="danjia">￥305.00</span>
							</li>


							<li class="good-item">
								<img src="./xqy/7.jpg">
								<a href="#" class="good-name">安踏男鞋毒刺跑鞋2021新款</a><br />
								<span class="danjia">￥306.00</span>
							</li>

							<li class="good-item">
								<img src="./xqy/8.jpg">
								<a href="#" class="good-name">安踏男鞋跑鞋2021新款</a><br />
								<span class="danjia">￥307.00</span>
							</li>

							<li class="good-item">
								<img src="./xqy/9.jpg">
								<a href="#" class="good-name">安踏泡泡全掌气垫跑鞋2021新款</a><br />
								<span class="danjia">￥308.00</span>
							</li>




							<li class="good-item">
								<img src="./xqy/10.jpg">
								<a href="#" class="good-name">安踏男鞋创1.0跑鞋2021新款</a><br />
								<span class="danjia">￥309.00</span>
							</li>

							<li class="good-item">
								<img src="./xqy/11.jpg">
								<a href="#" class="good-name">安踏男鞋弹力胶科跑鞋2021新款</a><br />
								<span class="danjia">￥310.00</span>
							</li>


							<li class="good-item">
								<img src="./xqy/12.jpg">
								<a href="#" class="good-name">安踏男鞋跑鞋2021新款</a><br />
								<span class="danjia">￥311.00</span>
							</li>

							<li class="good-item">
								<img src="./xqy/13.jpg">
								<a href="#" class="good-name">安踏男鞋C37度2.0跑鞋2021新款</a><br />
								<span class="danjia">￥312.00</span>
							</li>

							<li class="good-item">
								<img src="./xqy/14.jpg">
								<a href="#" class="good-name">安踏男鞋C37度2.0跑鞋2021新款</a><br />
								<span class="danjia">￥313.00</span>
							</li>

							<li class="good-item">
								<img src="./xqy/14.jpg">
								<a href="#" class="good-name">安踏男鞋C37度2.0跑鞋2021新款</a><br />
								<span class="danjia">￥313.00</span>
							</li>

						<!-- 	<li class="good-item">
								<img src="./xqy/15.jpg">
								<a href="#" class="good-name">安踏男鞋C37度2.0跑鞋2021新款</a><br />
								<span class="danjia">￥315.00</span>
							</li>
 -->

                    </ul>
                </div>
            </div>
        </div>

    </section>
    <footer></footer>
</body>

</html>
<script src="jQuery.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
    $("header").load("head.html");

    $.get("Detail.php", {
        typeId: "1"
    }, function(data) {
        console.log(data);
        let goodslist = JSON.parse(data)
        console.log(typeof goodslist);
        let str = "";
        goodslist.forEach(item => {
            //console.log(item);


            str += `
				<li class="good-item">
				<a href="magnifier.html">	<img src="${item.img}"></a>
			
			  	<a href="#" class="good-name">${item.title}</a><br />
			  	<span class="danjia">${item.praise}</span>
			  </li>`
        });
        $(".good-list").html(str);
    })


    $("footer").load("footer.html");
</script>